<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  created(){
    // alert("页面加载");
    // alert(localStorage.getItem("store"));
    //在页面加载时读取localStorage里的状态信息
    if (localStorage.getItem("store")) {
      // alert("读取数据");
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(localStorage.getItem("store"))))
    }

    //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
        // alert("页面刷新了");
        localStorage.setItem("store",JSON.stringify(this.$store.state))
    })
  }
}
</script>

<style lang="stylus">
  html,body,#app
    width 100%
    height 100%
    font-size 10px
    font-family "Helvetica Neue",Arial,"Hiragino Sans GB",STHeiti,"Microsoft YaHei"
  .fade-enter
    opacity 0
  .fade-enter-active
    transition opacity .2s
  .fade-enter-active
    transition opacity .2s
  .fade-leave
    opacity 1
  .fade-leave-active
    opacity 0
    transition opacity .2s
  em
    font-style normal
</style>
